﻿<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="Zoom.js"></script>
</head>
<body>
    <span id="scenarioTitle" data-win-fragmentadded="ZoomScenario.initialize">Use Zooming
        Option to Remove Letterbox/Pillarbox</span>
    <div class="item" id="scenarioInput">
        <p>
            If the picture aspect ratio of the video sample does not equal to the aspect ratio
            of the video window of the video tag, the "zoom" attribute allows the apps to programmatically
            zoom in or zoom out to make the video fit the video window without having a pillar
            or letterboxed experience.</p>
        <button class="action" id="zoomIn">
            Zoom in</button>
        <button class="action" id="zoomOut">
            Zoom out</button>
    </div>
    <div class="item" id="scenarioOutput">
        <video id="zoomVideo1" style="position: relative; z-index: auto; opacity: 1.0;" width="500"
            height="250" controls src="http://ie.microsoft.com/testdrive/Videos/BehindIE9AllAroundFast/Video.mp4"
            poster="images/sample-poster.jxr" loop>
        </video>
        <video id="zoomVideo2" style="position: relative; z-index: auto; opacity: 1.0;" width="300"
            height="300" controls src="http://ie.microsoft.com/testdrive/Videos/BehindIE9AllAroundFast/Video.mp4"
            poster="images/sample-poster.jxr" loop muted>
        </video>
    </div>
</body>
</html>
